<template>
  <div>
    <!-- 搜索框 -->
    <el-form :inline="true" :model="searchShop" class="demo-form-inline">
      <el-form-item label="店铺名称">
        <el-input v-model="searchShop.shop_name" placeholder="店铺名称" clearable />
      </el-form-item>

      <el-form-item label="店铺状态">
      
        <el-select v-model="searchShop.status" placeholder="店铺状态"  style="width: 240px">
          <el-option label="未审核" value="0"/>
          <el-option label="已审核" value="1"/>
          <el-option label="营业" value="2"/>
          <el-option label="歇业" value="3"/>
          <el-option label="违规" value="4"/>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="selectShopPage">搜索</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格标签 -->
    <el-table :data="shopList" style="width: 100%" border stripe>

      <el-table-column type="expand">
        <template #default="props">
          <el-descriptions class="margin-top" :column="3"  border>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  店铺地址:
                </div>
              </template>
              {{ props.row.shop_address }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  店铺介绍:
                </div>
              </template>
              {{ props.row.shop_explain }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  起送金额:
                </div>
              </template>
              {{ props.row.start_price }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  配送费:
                </div>
              </template>
              {{ props.row.delivery_price }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  备注:
                </div>
              </template>
              {{ props.row.remarks }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  是否推荐:
                </div>
              </template>
              {{ props.row.recommend == 0 ? '不推荐' : '推荐' }}
            </el-descriptions-item>

          </el-descriptions>

        </template>
      </el-table-column>

      <el-table-column type="index" width="100" label="序号" align="center" />
      <el-table-column prop="shop_name" label="店铺名称" align="center" />
      <el-table-column label="店铺图片" align="center">
        <template #default="scope">
          <img :src="scope.row.shop_img" alt="" width="50px" height="50px">
        </template>
      </el-table-column>
      <el-table-column prop="category_name" label="店铺分类" align="center" />
      <el-table-column prop="start_time" label="营业时间" align="center" />
      <el-table-column prop="end_time" label="闭店时间" align="center" />
      <el-table-column label="状态" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.status == 0" type="danger">未审核</el-tag>
          <el-tag v-if="scope.row.status == 1" type="success">已审核</el-tag>
          <el-tag v-if="scope.row.status == 2" type="primary">营业</el-tag>
          <el-tag v-if="scope.row.status == 3" type="info">歇业</el-tag>
          <el-tag v-if="scope.row.status == 4" type="warning">违规</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" v-if="scope.row.status == 0">设置审核通过</el-button>
          <el-button type="primary" v-else-if="scope.row.status !=0 && scope.row.status !=4">设置违规</el-button>
        </template>
      </el-table-column>
    </el-table>

<br>
    <!-- 分页 -->
    <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[5, 10, 20, 50]"
      layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
</template>

<script>
import { shopListPage } from '@/api/shop.js'
export default {
  data() {
    return {
      shopList: [],
      searchShop:{},
      currentPage:1,
      pageSize:5,
      total:0,
      business_id:0
    }
  },
  created() {
    let loginInfo = JSON.parse(sessionStorage.getItem("businessInfo"));
    
    if(loginInfo==null){
      //路由到登录页面
      this.$router.push("/login");
      return;
    }
    this.searchShop.business_id = loginInfo.id;
    
    this.selectShopPage();
  },
  methods:{
    handleSizeChange(val){
        this.pageSize = val;
        this.selectShopPage();
    },
    handleCurrentChange(val){
        this.currentPage = val;
        this.selectShopPage();
    },
    selectShopPage(){
      shopListPage({
        params:{
          page:this.currentPage,
          pageSize:this.pageSize,
          shop_name:this.searchShop.shop_name,
          status:this.searchShop.status,
          business_id:this.searchShop.business_id
        }
      }).then((result) => {
      this.shopList = result.data.list;
      this.total = result.data.total;
    })
    }
  }
}
</script>

<style scoped></style>